import React, { Component } from "react";
import { Dimensions, Image, View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
import {WebView} from 'react-native-webview'
import NavBar from '../../widget/customerHeader'
import NetUtil from '../../net/net_util'
import Loading from "../../widget/Loading";
import img_arr from "../../util/img_arr";

class WebViewPage extends Component {
  constructor(props) {
    super(props);
    this.id='';
    this.type=1;
    this.state = {
      height: 0,
      info:{
        title:'',
        author:'',
        createTime:''
      },
    };
  }

  componentDidMount() {
    this.id=this.props.route.params.id
    this.type=this.props.route.params.type
    if(this.type==1){
      //获取资讯详情
      this.getInfoDetail()
    }
    else{
      //获取章节详情
      this.getChapterInfo()
    }
  }

  /*获取资讯详情*/
  getInfoDetail(){
    Loading.show()
    NetUtil.get('base/news/detail',{'newsId':this.id},(res)=>{
      Loading.hide()
      if(res.code==200){
        this.setState({info:res.data})
      }
      else {}

    })
  }

  /*获取目录详情*/
  getChapterInfo(){
    Loading.show()
    NetUtil.get('base/knowledge/catalogue/detail',{'catalogueId':this.id},(res)=>{
      Loading.hide()
      if(res.code==200){
        this.setState({info:res.data})
      }
    })
  }

  /*收藏*/
  like(){
    let params={
      relationId:this.id,
      type:this.type==1?0:1
    }
    Loading.show()
    NetUtil.postFrom('member/member/like',params,(res)=>{
      console.log(res)
      Loading.hide()
      if(res.code==200){
        if(this.type==1){
          //获取资讯详情
          this.getInfoDetail()
        }
        else{
          //获取章节详情
          this.getChapterInfo()
        }
      }
    })
  }

  render() {
    const injectedJs = "const meta = document.createElement('meta');meta.setAttribute('content', 'initial-scale=1, maximum-scale=1, user-scalable=0');meta.setAttribute('name', 'viewport');\n" +
      "    document.getElementsByTagName('head')[0].appendChild(meta);let webHeight = document.body.scrollHeight;\n" +
      "    window.ReactNativeWebView.postMessage(webHeight);";
    return (
      <View style={{flex:1,backgroundColor:'#fff'}}>
        <NavBar leftOnPress={()=>{this.props.navigation.pop()}}>
          <View style={styles.rightBarItems}>
            <TouchableOpacity onPress={this.like.bind(this)}>
              <Image style={[styles.barItem,{width:this.state.info.isLike==1?22:18,height:this.state.info.isLike==1?22:18}]} source={this.state.info.isLike==1?img_arr.icon_info_favor_selected:img_arr.icon_favor_black}></Image>
            </TouchableOpacity>
            <TouchableOpacity>
              <Image style={styles.barItem} source={require('../../img/share_black.png')}></Image>
            </TouchableOpacity>
          </View>
        </NavBar>
        <ScrollView>
          <View style={{paddingHorizontal:16,paddingVertical:10}}>
            <Text style={styles.title}>{this.state.info.title}</Text>
            <View style={styles.flex}>
              <Text style={styles.author}>{this.state.info.author}</Text>
              <Text style={[styles.author,{marginLeft:20}]}>{this.state.info.createTime}</Text>
            </View>
          </View>
          <WebView
            style={{
              width: Dimensions.get("window").width,
              height: this.state.height,
            }}
            showsVerticalScrollIndicator={false}
            injectedJavaScript={injectedJs}
            automaticallyAdjustContentInsets={true}
            source={{
              html: `<!DOCTYPE html><html> <style type="text/css">
						.tour_product_explain img{ display: block!important; vertical-align: top!important; width: 100%!important;}
						.tour_product_explain{ padding: 0 8px 20px 8px;}
						.tour_product_explain *{text-align: left!important;
							font-size: 16px!important;
							line-height: 1.3!important;
							font-family: Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei!important;
							float: none!important;
							padding: 0!important;
							position: static!important;
							height: auto!important}
						</style><body><div class="tour_product_explain" id="content">${this.state.info.content}</div></body></html>`,
            }}
            scalesPageToFit={true}
            javaScriptEnabled={true} // 仅限Android平台。iOS平台JavaScript是默认开启的。
            domStorageEnabled={true} // 适用于安卓a
            scrollEnabled={false}
            onMessage={(event)=>{
              this.setState({ height: +event.nativeEvent.data })
            }}
          />
        </ScrollView>
        <Loading></Loading>
      </View>
    );
  }
}

export default module=WebViewPage

const styles=StyleSheet.create({
  rightBarItems:{
    flexDirection:'row',
    justifyContent:"flex-end",
    alignItems:'center',
    paddingRight:14
  },
  barItem:{
    width:18,
    height: 18,
    marginLeft:21
  },
  title:{
    color:'#252525',
    fontSize:22,
    fontWeight:'500'
  },
  flex:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    marginTop:12
  },
  author:{
    color:'#A6A6A6',
    fontSize:11
  }
})
